<template>
  <div class="echarts-contianer" ref="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

import { markRaw } from 'vue';
export default {
  components: {},
  props: {
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      iEcharts: null,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.boot();
    });
    window.addEventListener("resize", () => {
      this.iEcharts.resize();
    });
  },
  ondestroy() {
    this.iEcharts.dispose();
  },
  methods: {
    update(option) {
      this.iEcharts?.clear();
      this.iEcharts?.setOption(option);
      this.hideLoading();
    },
    hideLoading: function () {
      this.iEcharts.hideLoading();
    },
    boot() {
      if (!this.options) {
        return;
      }
    //   const echartsInstance = echarts.init(this.$refs.myChart, "", { renderer: "svg" });
      const echartsInstance = markRaw(echarts.init(this.$refs.myChart, "", { renderer: "svg" }));
      echartsInstance.setOption(this.options);
      this.iEcharts = echartsInstance;

      this.update(this.options);
    },
  },
  watch: {
    aaaa: {
      handler(val) {
        //监听value的变化
      },
      deep: true,
      immediate: true,
    },

    "options": {
      deep: true,
      immediate: true,
      handler(newOptions) {
        //监听value的变化
        setTimeout(() => {
          this.boot(newOptions);
          // console.log(11111, newOptions)
        }, 0);
      },
    },
  },
  computed: {},
};
</script>
<!-- 这里或采用lang="less" -->
<style lang="scss"></style>
<style scoped>
.echarts-contianer {
  width: 100%;
  height: 100%;
}
</style>
